window.onload = function () {
    var booctx = new Vue({
        el: '.book-ctx',
        data: {
            row: 0,
            col: 0,
            seatRect: {},
            seatType: [
                {
                    name: '单人桌',
                    type: 'single',
                    ispick: true
                },
                {
                    name: '双人桌(横排)',
                    type: 'double-r',
                    ispick: false
                },
                {
                    name: '双人桌(竖排)',
                    type: 'double-c',
                    ispick: false
                },
                {
                    name: '四人桌',
                    type: 'quadra',
                    ispick: false
                }
            ],
            curSeatType: 'single',
            tableNum: 0
        },
        methods: {
            lineChange: function (e) {
                // 监听行列数变化
                var self = this;
                var selfInput = e.currentTarget;
                var selfClass = selfInput.getAttribute('class');
                if (selfClass === 'row') {
                    self.row = parseInt(selfInput.value);
                } else {
                    if (parseInt(selfInput.value) > 40) {
                        weui.alert('不允许超过40列');
                        self.col = parseInt(40);
                    } else {
                        self.col = parseInt(selfInput.value);
                    }
                }
            },
            changeSeatType: function (e) {
                // 改变桌子类型
                var self = this;
                var curTarget = e.currentTarget;
                var index = curTarget.getAttribute('data-index');
                self.seatType.forEach(function (obj) {
                    obj.ispick = false
                });
                self.seatType[index].ispick = true;
                self.curSeatType = self.seatType[index].type;
            },
            hoverShow: function (index, e, type) {
                // 鼠标移入
                var self = this;
                switch (self.curSeatType) {
                    case 'single':
                        if (self.seatRect[index]) {
                            if (type === 'hover') {
                                self.seatRect[index].ishover = true;
                            }
                        } else {
                            if (type === 'hover') {
                                Vue.set(self.seatRect, index, {
                                    ispick: false,
                                    ishover: true
                                });
                            }
                        }
                        if (type === 'click') {
                            var srcIndex = index;
                            if (self.seatRect[index].ispick) {
                                weui.dialog({
                                    content: '是否删除当前桌子？',
                                    buttons: [{
                                        label: '取消',
                                        type: 'default',
                                        onClick: function () {
                                        }
                                    }, {
                                        label: '确定',
                                        type: 'primary',
                                        onClick: function () {
                                            self.deleteTable(self.seatRect[srcIndex].tableIndex);
                                        }
                                    }]
                                });
                            } else if (self.checkHasTable(index)) {
                                weui.alert('不允许重叠位置');
                            } else {
                                weui.dialog({
                                    content: '是否确定当前桌子位置',
                                    buttons: [{
                                        label: '取消',
                                        type: 'default',
                                        onClick: function () {
                                        }
                                    }, {
                                        label: '确定',
                                        type: 'primary',
                                        onClick: function () {
                                            self.tableNum = self.tableNum + 1;
                                            self.seatRect[index].ispick = true;
                                            self.seatRect[index].tableIndex = self.tableNum;
                                            self.seatRect[index].tableType = 'single';
                                        }
                                    }]
                                });
                            }

                        }
                        break;
                    case 'double-r':
                        var indexList = index.split(',');
                        var srcIndex = index;
                        if (parseInt(indexList[1]) + 1 < self.col) {
                            for (var i = 0; i < 2; i++) {
                                index = indexList[0] + ',' + (parseInt(indexList[1]) + i);
                                if (self.seatRect[index]) {
                                    if (type === 'hover') {
                                        self.seatRect[index].ishover = true;
                                    }
                                } else {
                                    if (type === 'hover') {
                                        Vue.set(self.seatRect, index, {
                                            ispick: false,
                                            ishover: true
                                        });
                                    }
                                }
                            }
                            if (type === 'click') {
                                var haspicked = false;
                                if (self.seatRect[srcIndex].ispick) {
                                    weui.dialog({
                                        content: '是否删除当前桌子？',
                                        buttons: [{
                                            label: '取消',
                                            type: 'default',
                                            onClick: function () {
                                            }
                                        }, {
                                            label: '确定',
                                            type: 'primary',
                                            onClick: function () {
                                                self.deleteTable(self.seatRect[srcIndex].tableIndex);
                                            }
                                        }]
                                    });
                                } else {
                                    for (var i = 0; i < 2; i++) {
                                        index = indexList[0] + ',' + (parseInt(indexList[1]) + i);
                                        if (self.checkHasTable(index)) {
                                            haspicked = true;
                                            break;
                                        }
                                    }
                                }
                                if (haspicked) {
                                    weui.alert('不允许重叠位置');
                                } else {
                                    weui.dialog({
                                        content: '是否确定当前桌子位置',
                                        buttons: [{
                                            label: '取消',
                                            type: 'default',
                                            onClick: function () {
                                            }
                                        }, {
                                            label: '确定',
                                            type: 'primary',
                                            onClick: function () {
                                                self.tableNum = self.tableNum + 1;
                                                for (var i = 0; i < 2; i++) {
                                                    index = indexList[0] + ',' + (parseInt(indexList[1]) + i);
                                                    self.seatRect[index].ispick = true;
                                                    self.seatRect[index].tableIndex = self.tableNum;
                                                    self.seatRect[index].tableType = 'double-r';
                                                }
                                            }
                                        }]
                                    });
                                }

                            }
                        }
                        break;
                    case 'double-c':
                        var indexList = index.split(',');
                        var srcIndex = index;
                        if (parseInt(indexList[0]) + 1 < self.row) {
                            for (var i = 0; i < 2; i++) {
                                index = (parseInt(indexList[0]) + i) + ',' + indexList[1];
                                if (self.seatRect[index]) {
                                    if (type === 'hover') {
                                        self.seatRect[index].ishover = true;
                                    }
                                } else {
                                    if (type === 'hover') {
                                        Vue.set(self.seatRect, index, {
                                            ispick: false,
                                            ishover: true
                                        });
                                    }
                                }
                            }
                            if (type === 'click') {
                                var haspicked = false;
                                if (self.seatRect[srcIndex].ispick) {
                                    weui.dialog({
                                        content: '是否删除当前桌子？',
                                        buttons: [{
                                            label: '取消',
                                            type: 'default',
                                            onClick: function () {
                                            }
                                        }, {
                                            label: '确定',
                                            type: 'primary',
                                            onClick: function () {
                                                self.deleteTable(self.seatRect[srcIndex].tableIndex);
                                            }
                                        }]
                                    });
                                } else {
                                    for (var i = 0; i < 2; i++) {
                                        index = (parseInt(indexList[0]) + i) + ',' + indexList[1];
                                        if (self.checkHasTable(index)) {
                                            haspicked = true;
                                            break;
                                        }
                                    }
                                }
                                if (haspicked) {
                                    weui.alert('不允许重叠位置');
                                } else {
                                    weui.dialog({
                                        content: '是否确定当前桌子位置',
                                        buttons: [{
                                            label: '取消',
                                            type: 'default',
                                            onClick: function () {
                                            }
                                        }, {
                                            label: '确定',
                                            type: 'primary',
                                            onClick: function () {
                                                self.tableNum = self.tableNum + 1;
                                                for (var i = 0; i < 2; i++) {
                                                    index = (parseInt(indexList[0]) + i) + ',' + indexList[1];
                                                    self.seatRect[index].ispick = true;
                                                    self.seatRect[index].tableIndex = self.tableNum;
                                                    self.seatRect[index].tableType = 'double-c';
                                                }
                                            }
                                        }]
                                    });
                                }

                            }
                        }
                        break;
                    case 'quadra':
                        var indexList = index.split(',');
                        var srcIndex = index;
                        if (parseInt(indexList[0]) + 1 < self.row && parseInt(indexList[1]) + 1 < self.col) {
                            for (var i = 0; i < 2; i++) {
                                for (var j = 0; j < 2; j++) {
                                    index = (parseInt(indexList[0]) + i) + ',' + (parseInt(indexList[1]) + j);
                                    if (self.seatRect[index]) {
                                        if (type === 'hover') {
                                            self.seatRect[index].ishover = true;
                                        }
                                    } else {
                                        if (type === 'hover') {
                                            Vue.set(self.seatRect, index, {
                                                ispick: false,
                                                ishover: true
                                            });
                                        }
                                    }
                                }
                            }
                            if (type === 'click') {
                                var haspicked = false;
                                if (self.seatRect[srcIndex].ispick) {
                                    weui.dialog({
                                        content: '是否删除当前桌子？',
                                        buttons: [{
                                            label: '取消',
                                            type: 'default',
                                            onClick: function () {
                                            }
                                        }, {
                                            label: '确定',
                                            type: 'primary',
                                            onClick: function () {
                                                self.deleteTable(self.seatRect[srcIndex].tableIndex);
                                            }
                                        }]
                                    });
                                } else {
                                    for (var i = 0; i < 2; i++) {
                                        for (var j = 0; j < 2; j++) {
                                            if (self.checkHasTable(index)) {
                                                haspicked = true;
                                                break;
                                            }
                                        }
                                    }
                                }
                                if (haspicked) {
                                    weui.alert('不允许重叠位置');
                                } else {
                                    weui.dialog({
                                        content: '是否确定当前桌子位置',
                                        buttons: [{
                                            label: '取消',
                                            type: 'default',
                                            onClick: function () {
                                            }
                                        }, {
                                            label: '确定',
                                            type: 'primary',
                                            onClick: function () {
                                                self.tableNum = self.tableNum + 1;
                                                for (var i = 0; i < 2; i++) {
                                                    for (var j = 0; j < 2; j++) {
                                                        index = (parseInt(indexList[0]) + i) + ',' + (parseInt(indexList[1]) + j);
                                                        self.seatRect[index].ispick = true;
                                                        self.seatRect[index].tableIndex = self.tableNum;
                                                        self.seatRect[index].tableType = 'quadra';
                                                    }
                                                }
                                            }
                                        }]
                                    });
                                }
                            }
                        }
                        break;
                }
            },
            hoverHide: function (index, e, type) {
                // 鼠标移出
                var self = this;
                switch (self.curSeatType) {
                    case 'single':
                        self.seatRect[index].ishover = false;
                        break;
                    case 'double-r':
                        var indexList = index.split(',');
                        if (parseInt(indexList[1]) + 1 < self.col) {
                            for (var i = 0; i < 2; i++) {
                                index = indexList[0] + ',' + (parseInt(indexList[1]) + i);
                                self.seatRect[index].ishover = false;
                            }
                        }
                        break;
                    case 'double-c':
                        var indexList = index.split(',');
                        if (parseInt(indexList[0]) + 1 < self.row) {
                            for (var i = 0; i < 2; i++) {
                                index = (parseInt(indexList[0]) + i) + ',' + indexList[1];
                                self.seatRect[index].ishover = false;
                            }
                        }
                        break;
                    case 'quadra':
                        var indexList = index.split(',');
                        if (parseInt(indexList[0]) + 1 < self.row && parseInt(indexList[1]) + 1 < self.col) {
                            for (var i = 0; i < 2; i++) {
                                for (var j = 0; j < 2; j++) {
                                    index = (parseInt(indexList[0]) + i) + ',' + (parseInt(indexList[1]) + j);
                                    self.seatRect[index].ishover = false;
                                }
                            }
                        }
                        break;

                }
            },
            checkHasTable: function (index) {
                // 检查布置座子的位置中是否有重叠部分
                var self = this;
                if (self.seatRect[index]) {
                    if (self.seatRect[index].tableIndex !== undefined) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return false;
                }
            },
            deleteTable: function (tabIndex) {
                // 删除桌子
                var self = this;
                var newSeatRect = {};
                for (var item in self.seatRect) {
                    if (self.seatRect[item].tableIndex !== tabIndex) {
                        newSeatRect[item] = self.seatRect[item];
                    }
                    ;
                }
                self.seatRect = newSeatRect;
            },
            cleanAll: function () {
                // 清空当前桌子布置
                var self = this;
                weui.dialog({
                    content: '是否清空当前桌子布置？',
                    buttons: [{
                        label: '取消',
                        type: 'default',
                        onClick: function () {
                        }
                    }, {
                        label: '确定',
                        type: 'primary',
                        onClick: function () {
                            self.seatRect = {};
                        }
                    }]
                });
            },
            getTableInfo: function () {
                // 结构化安排座位信息
                var self = this;
                weui.dialog({
                    content: '是否保存（保存后将无法修改）？',
                    buttons: [{
                        label: '取消',
                        type: 'default',
                        onClick: function () {
                        }
                    }, {
                        label: '确定',
                        type: 'primary',
                        onClick: function () {
                            var newSeatRect = {};
                            var finalSeatRect = {};
                            var temIndex;
                            var temObj;
                            for (var item in self.seatRect) {
                                if (self.seatRect[item].tableIndex !== undefined) {
                                    self.seatRect[item].pos = item;
                                    temIndex = self.seatRect[item].tableIndex;
                                    temObj = self.seatRect[item];
                                    delete temObj.tableIndex;
                                    if (newSeatRect[temIndex]) {
                                        newSeatRect[temIndex].push(self.seatRect[item]);
                                    } else {
                                        newSeatRect[temIndex] = [];
                                        newSeatRect[temIndex].push(self.seatRect[item]);
                                    }
                                };
                            }
                            var i = 0;
                            for (var item in newSeatRect) {
                                i++;
                                finalSeatRect[i] = newSeatRect[item];
                            }
                            // 最终结果，这里可以对数据进行提交处理
                            console.log(finalSeatRect);
                        }
                    }]
                });
            }
        }
    });
}